<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function demo1(){
				alert("单事件的执行");
			}
			var demo2=function(){
				alert("双击事件");
			}
			var demo3=function(){
				alert("鼠标事件");
			}
			function demo4(){
				alert("离开");
			}
			function demo5(){
				console.log(鼠标移动);
			}
			function demo6(){
				alert("键盘弹起");
			}
			function demo7(){
				alert("键盘按下");
			}
			function demo8(){
				alert("焦点");
			}
			function demo9(){
				alert("页面加载完成");
			}
		</script>
	</head>
	<body onload="demo9()">
		<!--单击事件
			onclick="函数名";(与上面的函数名一致)
		-->
		<!--加分号 函数名            两个事件都 启动-->
		<input type="button" name="" id="" value="单击操作"  onclick="demo1();demo2()"/>
		<!--双击事件-->
		<input type="button" name="" id="" value="双击事件" ondblclick="demo2()"/>
		
		<!--鼠标事件     onmouseover    鼠标放上事件-->
		
		<div style="width: 300px;height: 300px;background-color: red;"onmouseover="demo3()"></div>
		<!--鼠标离开-->
		<div style="width: 300px;height: 300px;background-color: blue;"onmouseout="demo4()"></div>	
		<!--鼠标移动-->
		<div style="width: 200px;height: 200px;background-color: gold;"onmousemove="demo5()"></div>	
		
		<!--键盘事件-->
		<input type="text" onkeyup="demo6()" /><br />
		<input type="text" onkeydown="demo7()" /><br />
		
		<!--获得焦点事件        onfocus	  失去焦点:onblur	内容改变onchane-->
		<input type="text" name="" id="" value="" onfocus="demo8()"/>
		
	</body>
</html>
